<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eumorphism Menu</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
		<link rel="stylesheet" href="./menu.css"/>
	</head>
	<body>
		<div class="softBar">
		  <div id="smile" class="yellow softButton" onclick="selectItem('smile')">
		    <i class=" fas fa-smile-wink"></i>
		  </div>
		  <div id="list" class="green softButton" onclick="selectItem('list')">
		    <i class="fas fa-list-ul " data-fa-mask="fas fa-circle"></i> 
		  </div>
		  <div id="share" class="red softButton" onclick="selectItem('share')">
		    <i class="fas fa-share-alt"></i>
		  </div>
		  <div id="user" class="pink softButton" onclick="selectItem('user')">
		    <i class="fas fa-user"></i>
		  </div>
		  <div id="cog" class="turquoise softButton" onclick="selectItem('cog')">
		    <i class="fas fa-cog"></i>
		  </div>
		</div>
		<div class="contentBox">
		  <h1 id="output">#Emoji</h1>
		  <div class="demoCard">
		    <div style="position: relative; ">
		      License:&nbsp;
		      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
		    </div>
		  </div>
		  <div class="demoCard">
		    <div style="position: relative; ">Blog:&nbsp;
		      <a href="https://epische.website" target="_blank">epische.website</a>
		    </div>
		  </div>
		  <div class="demoCard">
		    <div style="position: relative; ">
		      Twitter:&nbsp;
		      <a href="https://twitter.com/MenschOmaten" target="_blank">@MenschOmaten</a>
		    </div>
		  </div>
		</div>
		<script src="./menu.js"></script>
	</body>
</html>